<template>
	<view class="container ">
		<view class="list">
			<view class="li" v-for="item in dataSource" :key="item" @click="toDetail(item)">
				<image class="goodImg" :src="item.thumb"></image>
				<view class="goodInfo">
					<view class="goodName overflowText1">{{item.title}}</view>
					<view class="goodPrice">
						<text class="goodUnit">￥</text>
						{{item.price}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: null,
				dataSource: [
				],
				pageNo:1,
				pageSize:20,
				hasNext:true,
				id:''
			}
		},
		onReachBottom(){
			if(this.hasNext){
				this.pageNo+=1
				this.getData()
			}
		},
		onLoad(option) {
			console.log(option,'option');
			this.id = option.id
			uni.setNavigationBarTitle({
				title:option.title
			})
			this.pageNo =1 
			this.dataSource = []
			this.getData()
		},
		methods:{
			toDetail(item) {
				uni.navigateTo({
					url: `/package/index/yishangfan-detail?id=${item.id}`,
					// url: '/package/index/choujiang?id='+item.id,
				})
			},
			getData(){
				this.req({
					url: '/v1/box/list',
					data: {
						page:this.pageNo,
						cat_id:this.id,
						per_page:this.pageSize
					},
					Loading: true,
					success: res => {
						if (res.code == 200) {
							this.dataSource = this.dataSource.concat(...res.data.new_data[this.id].list)
							this.hasNext = res.data.new_data[this.id].list.length>0
				
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		min-height: 100vh;
		padding: 20rpx 20rpx;
		background-color: rgba(173, 216, 230,.5);
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.list{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-content: flex-start;
			.li {
					
						width: 49%;
						height: 440rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						margin-bottom: 20rpx;
						border-bottom: 0 0 10rpx #ddd;
						.goodImg {
							width: 100%;
							height: 286rpx;
							border-radius: 16rpx 16rpx 0 0;
						}
			
						.goodInfo {
							padding: 10rpx 12rpx 18rpx;
							box-sizing: border-box;
			
							.goodName {
								font-family: PingFang SC;
								font-weight: bold;
								font-size: 32rpx;
								color: #000000;
								margin-bottom: 15rpx;
							}
			
							.goodSku {
								font-family: PingFang SC;
								font-weight: bold;
								font-size: 24rpx;
								color: #999999;
								margin-bottom: 15rpx;
							}
			
							.goodPrice {
								font-family: DIN BlackAlternate;
								font-size: 32rpx;
								color: #FF1D1D;
								font-weight: bold;
			text-align: right;
								.goodUnit {
									font-family: PingFang SC;
									font-weight: blod;
									font-size: 24rpx;
									color: #FF1D1D;
								}
							}
						}
					}
		}

	}
</style>